<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
    <title>Online Educational Landing Page | AsmrProg</title>
</head>

<body>

    <nav>
        <div class="left">
            <div class="logo">
                <img src="assests/logo.png">
            </div>
            <div class="links">
                <a href="#">Home</a>
                <a href="#">Courses</a>
                <a href="#">Articles</a>
                <a href="#">Podcasts</a>
                <a href="#">About Us</a>
                <a href="#">Contact Us</a>
            </div>
        </div>

        <div class="buttons">
            <a href="#"><i class='bx bx-support'></i></a>
            <a href="#"><i class='bx bx-basket'></i></a>
            <a href="#"><i class='bx bx-user'></i></a>
        </div>

    </nav>

    <header>
        <div class="info">
            <h1>Learn Coding Easier With AsmrProg</h1>
            <p>Learn Programming With Coach And Mentor!</p>
        </div>
        <div class="buttons">
            <button class="see-all">See Courses</button>
            <button>What Is Coding?</button>
        </div>
        <div class="search">
            <input type="text" placeholder="Search what you want...">
            <button><i class='bx bx-search'></i></button>
        </div>
    </header>

    <div class="content">
        <div class="separator">
            <h2>Popular Courses</h2>
            <a href="#">See all <i class='bx bx-chevron-right'></i></a>
        </div>

        <div class="courses">
            <div class="item">
                <div class="top">
                    <img src="assests/course-1.jpg">
                    <div class="info">
                        <a href="#">Learn React With Mini Projects</a>
                        <p>Author : Reza Mehdikhanlou</p>
                        <p>Duration : +13h</p>
                        <p>Lifetime Support</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="price">
                        <h5>Price : 40$</h5>
                        <p>Old Price : 120$</p>
                    </div>
                    <h5 class="tag"><span>+400</span> Students</h5>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/course-2.jpg">
                    <div class="info">
                        <a href="#">Complete Bootstrap Course</a>
                        <p>Author : Reza Mehdikhanlou</p>
                        <p>Duration : +13h</p>
                        <p>Lifetime Support</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="price">
                        <h5>Price : 40$</h5>
                        <p>Old Price : 120$</p>
                    </div>
                    <div class="discount">
                        <div class="time">
                            <p>Until</p>
                            <h5>3 days</h5>
                        </div>
                        <h5><span>20%</span> Discount</h5>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/course-3.jpg">
                    <div class="info">
                        <a href="#">100 Days Of JavaScript</a>
                        <p>Author : Reza Mehdikhanlou</p>
                        <p>Duration : +13h</p>
                        <p>Lifetime Support</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="price">
                        <h5>Price : 40$</h5>
                        <p>Old Price : 120$</p>
                    </div>
                    <h5 class="tag"><span>+400</span> Students</h5>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/course-4.jpg">
                    <div class="info">
                        <a href="#">Learn Responsive Design</a>
                        <p>Author : Reza Mehdikhanlou</p>
                        <p>Duration : +13h</p>
                        <p>Lifetime Support</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="price">
                        <h5>Price : 40$</h5>
                        <p>Old Price : 120$</p>
                    </div>
                    <div class="discount">
                        <div class="time">
                            <p>Until</p>
                            <h5>3 days</h5>
                        </div>
                        <h5><span>20%</span> Discount</h5>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/course-5.jpg">
                    <div class="info">
                        <a href="#">Learn PHP With Mini Projects</a>
                        <p>Author : Reza Mehdikhanlou</p>
                        <p>Duration : +13h</p>
                        <p>Lifetime Support</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="price">
                        <h5>Price : 40$</h5>
                        <p>Old Price : 120$</p>
                    </div>
                    <h5 class="tag"><span>+400</span> Students</h5>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/course-6.jpg">
                    <div class="info">
                        <a href="#">Coding Api With NodeJS</a>
                        <p>Author : Reza Mehdikhanlou</p>
                        <p>Duration : +13h</p>
                        <p>Lifetime Support</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="price">
                        <h5>Price : 40$</h5>
                        <p>Old Price : 120$</p>
                    </div>
                    <div class="discount">
                        <div class="time">
                            <p>Until</p>
                            <h5>3 days</h5>
                        </div>
                        <h5><span>20%</span> Discount</h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="separator">
            <h2>Students Comments</h2>
        </div>

        <div class="comments">
            <p>These are our students comments. This will help you choose courses better. Also you can contact us for
                more info!</p>
            <div class="right">
                <div class="item">
                    <img src="assests/profile-3.png">
                    <p>That was best course for me.</p>
                </div>
                <div class="item">
                    <img src="assests/profile-2.png">
                    <p>This courses helped me a lot!</p>
                </div>
                <div class="item">
                    <img src="assests/profile-1.png">
                    <p>That was best course for me.</p>
                </div>
                <div class="item">
                    <img src="assests/profile-1.png">
                    <p>This courses helped me a lot!</p>
                </div>
                <div class="item">
                    <img src="assests/profile-2.png">
                    <p>That was best course for me.</p>
                </div>
                <div class="item">
                    <img src="assests/profile-3.png">
                    <p>This courses helped me a lot!</p>
                </div>

            </div>
        </div>

        <div class="separator">
            <h2>Weekly Podcasts</h2>
            <a href="#">See all <i class='bx bx-chevron-right'></i></a>
        </div>

        <div class="podcasts">
            <div class="item">
                <div class="top">
                    <i class='bx bx-headphone'></i>
                    <div class="info">
                        <a href="#">Learn Coding</a>
                        <p>10 Aug 2024</p>
                        <p>Listened 100 Times</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="duration">
                        <i class='bx bx-play-circle'></i>
                        <p>01:02:10</p>
                    </div>
                    <h5 class="tag"><span>+210</span> Listeners</h5>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <i class='bx bx-headphone'></i>
                    <div class="info">
                        <a href="#">Learn Coding</a>
                        <p>10 Aug 2024</p>
                        <p>Listened 100 Times</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="duration">
                        <i class='bx bx-play-circle'></i>
                        <p>01:02:10</p>
                    </div>
                    <h5 class="tag"><span>+210</span> Listeners</h5>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <i class='bx bx-headphone'></i>
                    <div class="info">
                        <a href="#">Learn Coding</a>
                        <p>10 Aug 2024</p>
                        <p>Listened 100 Times</p>
                    </div>
                </div>
                <div class="bottom">
                    <div class="duration">
                        <i class='bx bx-play-circle'></i>
                        <p>01:02:10</p>
                    </div>
                    <h5 class="tag"><span>+210</span> Listeners</h5>
                </div>
            </div>
        </div>

        <div class="separator">
            <h2>Blog Articles</h2>
            <a href="#">See all <i class='bx bx-chevron-right'></i></a>
        </div>

        <div class="articles">
            <div class="item">
                <div class="top">
                    <img src="assests/art-1.jpg">
                    <h5>What is unique brand?</h5>
                </div>
                <div class="bottom">
                    <h5><span>+420</span> Views</h5>
                    <a href="#">Read More <i class='bx bx-chevron-right'></i></a>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/art-2.jpg">
                    <h5>What is unique brand?</h5>
                </div>
                <div class="bottom">
                    <h5><span>+420</span> Views</h5>
                    <a href="#">Read More <i class='bx bx-chevron-right'></i></a>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/art-3.jpg">
                    <h5>What is unique brand?</h5>
                </div>
                <div class="bottom">
                    <h5><span>+420</span> Views</h5>
                    <a href="#">Read More <i class='bx bx-chevron-right'></i></a>
                </div>
            </div>
            <div class="item">
                <div class="top">
                    <img src="assests/art-4.jpg">
                    <h5>What is unique brand?</h5>
                </div>
                <div class="bottom">
                    <h5><span>+420</span> Views</h5>
                    <a href="#">Read More <i class='bx bx-chevron-right'></i></a>
                </div>
            </div>
        </div>

    </div>

    <footer>
        <div class="columns">
            <div class="col">
                <h5>Site Links</h5>
                <a href="#">Articles</a>
                <a href="#">Podcasts</a>
                <a href="#">About Us</a>
                <a href="#">Contact Us</a>
            </div>
            <div class="col">
                <h5>Other Pages</h5>
                <a href="#">404 Page</a>
                <a href="#">Login|Register</a>
                <a href="#">Privacy Policy</a>
            </div>
            <div class="col">
                <h5>Collaboration</h5>
                <a href="#">Work With Us</a>
                <a href="#">Affiliate</a>
                <a href="#">Support</a>
            </div>
            <div class="col last">
                <h5>About Us</h5>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab ad incidunt deleniti eligendi, vel
                    quaerat a
                    doloremque, quo id maiores suscipit ex iste accusantium.</p>
                <div class="social-links">
                    <i class='bx bxl-instagram'></i>
                    <i class='bx bxl-dribbble'></i>
                    <i class='bx bxl-linkedin'></i>
                    <i class='bx bxl-twitter'></i>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>Copyright © 2024 AsmrProg, All Rights Reserved.</p>
        </div>
    </footer>


</body>

</html>